<!-- 五金进出仓 -->
<template>
  <div class="contioner">
    <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="年份" prop="endDate">
          <a-year-picker
            v-model="query.endDate"
            :style="{ width: '180px' }"
            placeholder="选择年份"
            class="bacClass"
          />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
      <a-space>
        <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
      </a-space>
    </div>
    </div>
    
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>
    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '44%', padding: '10px' }">
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
      </div>
    </div>
    <div :style="{ height: '42%', padding: '10px' }">
      <div ref="yieldMain" class="yieldMain"></div>
    </div>
  </div>
</template>
    
    <script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import { tableColumns } from './HardwareEntryAndExit'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
const headerShow = ref(true)

interface Pagein {
  loading: boolean
}

// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  loading: false,
})

interface Querin {
  beginDate: any
  endDate: any
  planOrderCode: string
}

//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: dayjs().subtract(1, 'year').format('YYYY'), //当天日期
  // beginDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'), //当天日期
  endDate: dayjs().subtract(0, 'year').format('YYYY'), //当天日期
  planOrderCode: '',
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/GreyStockIn/getPage', //接口路径
  queryData: {
    //接口参数
  },
  paginationShow: false, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
})
const yieldMain = ref<any>()
let yieldInit = null

const getEcharts = () => {
  yieldInit = echarts.init(yieldMain.value)
  let option = {
    title: {
      text: `${query.beginDate}年五金采购、出仓、月末结存金额（万元）`,
      /*textVerticalAlign:'center'*/
      top: '2%',
      left: '45%',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['进仓金额', '出仓金额', '结存金额'],
      top: '10%',
      right: '5%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '月均',
        '1月均价',
        '2月均价',
        '3月均价',
        '4月均价',
        '5月均价',
        '6月均价',
        '7月均价',
        '8月均价',
        '9月均价',
        '10月均价',
        '11月均价',
        '12月均价',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '进仓金额',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230, 411],
      },
      {
        name: '出仓金额',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 111],
      },
      {
        name: '结存金额',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 360],
      },
    ],
  }
  yieldInit.setOption(option)
}
//获取数据
const getList = async () => {
  refgridOption.value.setQuery(query)
  console.log(refgridOption.value.getListData())
}

//初始化
onMounted(() => {
  getEcharts()
  // getList()
})
</script>
    <script lang="ts">
export default defineComponent({
  name: 'ChemicalProcurement',
})
</script>
    <style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
.yieldMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
</style>
    